<template>
  <div class="all-rel all-flex-center-between">
    <el-menu class="el-menu-nav" :default-active="activeIndex" mode="horizontal" menu-trigger="click" v-if="identity === 'master'">
      <el-menu-item index="1" style="margin-left:30px"><router-link to="/master/order-list">订单列表</router-link></el-menu-item>
      <el-menu-item index="2"><router-link to="/master/account-list">结算列表</router-link></el-menu-item>
      <el-menu-item index="3"><router-link to="/master/check-list">已核销列表</router-link></el-menu-item>
    </el-menu>


    <el-menu class="el-menu-nav" :default-active="activeIndex" mode="horizontal" menu-trigger="click" v-else-if="identity === 'agent'">
      <el-menu-item index="1" style="margin-left:30px"><router-link to="/agent/account-list">结算列表</router-link></el-menu-item>
      <el-menu-item index="2"><router-link to="/agent/other">其他</router-link></el-menu-item>
    </el-menu>


    <el-menu class="el-menu-nav" :default-active="activeIndex" mode="horizontal" v-else>
      <el-menu-item index="1" style="margin-left:30px"><router-link to="/index">首页</router-link></el-menu-item>
      <el-menu-item index="2"><router-link to="/type/list">产品分类</router-link></el-menu-item>
      <el-menu-item index="3"><router-link to="/image/list">图片管理</router-link></el-menu-item>
      <el-menu-item index="4"><router-link to="/member/list">会员列表</router-link></el-menu-item>
      <el-menu-item index="5"><router-link to="/storer/list">商户管理</router-link></el-menu-item>
      <el-submenu index="6">
        <template slot="title">产品管理</template>
        <el-menu-item index="6-1" @click="$router.push('/product/list')">产品列表</el-menu-item>
        <el-menu-item index="6-2" @click="$router.push('/product/auditing')">审核列表</el-menu-item>
      </el-submenu>
      <el-menu-item index="7"><router-link to="/order/list">订单管理</router-link></el-menu-item>
      <el-menu-item index="8"><router-link to="/bargain/list">砍价活动</router-link></el-menu-item>
      <el-menu-item index="10"><router-link to="/article/list">文库管理</router-link></el-menu-item>
      <el-menu-item index="9"><router-link to="/sms/list">短信模板</router-link></el-menu-item>
    </el-menu>
    <div class="handle">
      <el-popover
        placement="bottom"
        width="150"
        trigger="hover"
        popper-class="popper"
        @after-enter="popoverHandle"
      >
        <div class="handle-btn" @click="$router.push('/add-user')" v-if="identity === 'super'">添加商户</div>
        <div class="handle-btn" @click="quit">退出/切换账号</div>
        <div class="handle-box" slot="reference"></div>
      </el-popover>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
      identity: '',
    }
  },
  methods: {
    //防止logo页层级被遮挡，因为popper层级会叠加
    popoverHandle() {
      document.querySelector(".popper").style.zIndex = 1000;
    },
    setStatus(meta) {
      if (meta.user === "agent") {
        this.identity = "agent";
      } else if (meta.user === "master") {
        this.identity = "master";
      } else {
        this.identity = "super";
      }
      if (meta.index !== undefined) {
        this.activeIndex = meta.index;
      }
    },
    quit() {
      this.$store.commit("user/removeUserSign");
      this.$router.push({name: "route2"});
    }
  },
  watch: {
    $route(to, from) {
      this.setStatus(to.meta);
    }
  },
  created(e) {
    this.setStatus(this.$route.meta);
  }
}
</script>

<style scoped>
.el-menu-nav {
  width: 100%;
  height: 85px;
}
.el-menu-nav > .el-menu-item, .el-menu-nav > .el-submenu {
  padding: 0;
  margin-top: 25px;
}
.logo {
  display: block;
  position: relative;
  width: 150px;
  height: 85px;
}
.logo img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 70px;
  margin: auto;
}
.el-menu-item a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 20px;
}
.el-menu-nav > .el-menu-item:hover {
  height: 58px !important;
}
.el-menu-nav > .el-menu-item.is-active:hover {
  height: 60px !important;
}
.handle {
  position: absolute;
  top: 17px;
  right: 30px;
}
.handle-box {
  width: 50px; 
  height: 50px;
  color: #409eff;
  line-height: 50px;
  text-align: center;
  background: url(../../assets/logo.jpg) center / cover no-repeat;
  border: 1px solid #409eff;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
}
.handle-btn {
  margin: 5px 0;
  font-size: 15px;
  cursor: pointer
}
.handle-btn:hover {
  color: #409eff;
}
</style>
